<template>
	<view class="content">
		<!-- 安全区域 -->
		<view class="safeContent">
			<!-- 顶部功能栏 -->
			<view class="topFunc">
				<!-- 左侧展开区域 -->
				<view class="unfold">
					<image src="../../static/images/Home/icon-mine.png" mode="widthFix"></image>
				</view>
				<!-- 右侧功能区域 -->
				<view class="rightFunc">
					<!-- 			<image src="../../static/images/Home/sweep.png" mode="widthFix"></image> -->
					<image @click="MyMsg" src="../../static/images/Home/remind.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 资产增幅面板 -->
			<view class="assetPanel">
				<view class="topCont">
					<view class="allMoney">总资产<text> ≈ 143540USDT</text></view>
					<view class="allMoney">昨日产出算力<text> ≈ 4USDT</text></view>
				</view>
				<view class="amountCont">
					<view class="allPro">
						1,580,165
						<view class="unit">KOI</view>
					</view>
					<view class="dayPro green">
						+12
						<view class="unit">KOI</view>
					</view>
				</view>
			</view>
			<!-- 首页Banner图 -->
			<view class="firstBanner">
				<image src="../../static/images/Home/Home_first_banner.png" mode="widthFix" width="100%"></image>
			</view>
			<!-- 公告栏部分 -->
			<view class="bullentin">
				<view class="bullCir">
					<image src="../../static/images/Home/affiche.png" mode="widthFix"></image>
				</view>
				<view class="">KOI APP系统预计于20点进行维护</view>
			</view>
			<!-- 功能Tabbar栏 -->
			<view class="funcTabbar">
				<view @click="upCapital">
					<view class="tabCircle">
						<image src="../../static/images/Home/Home_tab1.png" mode="widthFix"></image>
					</view>
					<view>
						资金账户
					</view>
				</view>
				<view @click="toHistoryPrice">
					<view class="tabCircle">
						<image src="../../static/images/Home/Home_tab2.png" mode="widthFix"></image>
					</view>
					<view>
						锦鲤服务商
					</view>
				</view>
				<view>
					<view class="tabCircle">
						<image src="../../static/images/Home/Home_tab3.png" mode="widthFix"></image>
					</view>
					<view>
						锦鲤算力卡
					</view>
				</view>
				<view @click="GoCS">
					<view class="tabCircle">
						<image src="../../static/images/Home/Home_tab4.png" mode="widthFix"></image>
					</view>
					<view>
						在线客服
					</view>
				</view>
			</view>
			<!-- 领取节点 -->
			<view class="getNode" @click="upVipCard">
				<view class="everyDay">
					每天可领取
					<view class="color">
						10KOI
					</view>
				</view>
				<view class="getBottom">
					<button class="sbGet" @click.stop="getKOI">领取</button>
					<view class="">
						每日00:00刷新领取次数
					</view>
				</view>
			</view>
			<!-- 会员 -->
			<view class="getVip" @click="inkoiNode">
				<view class="blackDate">
					<view class="deadline">
						第2期
					</view>
					成为黑金会员60天
				</view>
				<view class="jackpot">
					<view class="">
						预计收益95,454USTD+200张锦鲤算力卡
					</view>
				</view>
				<view class="jackpotT">
					<view class="">
						预计12月13日00:00发放
					</view>
					<view class="progress">
						<view class="progressChlid"></view>
					</view>
				</view>
			</view>
			<!-- 帮助功能 -->
			<view class="guide">
				<view class="play">
					<image src="../../static/images/Home/state.png" mode="widthFix"></image>
					<view>USDT充提教程</view>
				</view>
				<view class="right">
					<view class="new">
						<image src="../../static/images/Home/novice.png" mode="widthFix"></image>
						新手指引
					</view>
					<view class="feed">
						<image src="../../static/images/Home/feedback.png" mode="widthFix"></image>
						我要反馈
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script lang="ts" setup>
	// import { postHomeAPI, getHomeAPI2 } from '@/api/home'
	import { ref } from 'vue'
	// import { onShow } from '@dcloudio/uni-app';
	const assetPanel = ref({})
	const getVip = ref({})

	function inkoiNode() {
		uni.navigateTo({
			url: '/homeSub/KoiNode/index'
		})
	}

	function toHistoryPrice() {
		uni.navigateTo({
			// url: '/homeSub/historyPrice/index'
			// url: '/homeSub/PendingOrder/index'
			url: '/homeSub/ServiceProvider/index'
		})
	}
	// onShow(
	// 	async () => {
	// 		const res = await postHomeAPI()
	// 		assetPanel.value = res.data
	// 		console.log(res)
	// 		const res2 = await getHomeAPI2()
	// 		getVip.value = res2.data
	// 		console.log(res2)
	// 	}
	// )
	// 跳转资金账户
	const upCapital = () : void => {
		uni.navigateTo({
			url: '/homeSub/capital/index'
		})
	}
	// 信息中心
	const MyMsg = () : void => {
		uni.navigateTo({
			url: '/homeSub/MyMsg/index'
		})
	}
	//  跳转到客服页面
	const GoCS = () => {
		uni.navigateTo({
			url: '/homeSub/customerService/index'
		})
	}
	// 进入会员卡片
	const upVipCard = () : void => {
		uni.navigateTo({
			url: '/homeSub/vipcard/index'
		})
	}
	// 领取节点
	const getKOI = () : void => {
		alert('领取成功')
	}
</script>

<style lang="scss">
	.content {
		background: url(../../static/images/Home/bg-top.png) no-repeat;
		background-size: 100%;
	}

	.safeContent {
		width: calc(100% - 62px);
		margin: 0 auto;
		padding-top: 28px;

		// 顶部功能栏样式
		.topFunc {
			display: flex;
			justify-content: space-between;

			image {
				width: 32px;
			}

			.rightFunc {
				image {
					margin-left: 48px;
				}
			}

		}

		// 资产增幅面板样式
		.assetPanel {
			margin-top: 60px;
			color: #fff;

			image {
				width: 24px;
			}

			// 面板顶部文字区域样式
			.topCont {
				font-size: 24px;
				display: flex;
				justify-content: space-between;

			}

			// 底部资产部分样式
			.amountCont {
				display: flex;
				justify-content: space-between;
				margin-top: 6px;
				font-size: 42px;

				.allPro {
					text-align: left;
				}

				.unit {
					font-size: 18px;
					display: inline-block;
					vertical-align: bottom;
					margin-bottom: 8px;
				}

				.green {
					color: #00D0B9;
				}
			}
		}

		// 首页Banner
		.firstBanner {
			margin-top: 30px;

			image {
				width: 100%;
			}
		}

		// 公告栏样式
		.bullentin {
			height: 64px;
			line-height: 64px;
			background-color: #2A2B2E;
			margin-top: 30px;
			border-radius: 50px;
			display: flex;
			color: #fff;
			font-size: 24px;
			background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));

			.bullCir {
				width: 64px;
				height: 64px;
				border-radius: 50%;
				margin-right: 20px;
				background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));

				image {
					width: 24px;
					margin: 20px;
					display: block;
				}
			}
		}

		// 功能Tabbar样式
		.funcTabbar {
			margin-top: 40px;
			display: flex;
			justify-content: space-around;
			color: #fff;
			font-size: 28px;
			text-align: center;

			image {
				width: 164px;
			}
		}

		// 领取节点样式
		.getNode {
			margin-top: 40px;
			background: url(../../static/images/Home/Home_bg_stars.png) no-repeat;
			background-size: 100%;
			height: 256px;
			padding: 110px 38px 0;
			color: #F1F7F9;

			.everyDay {
				margin-top: 50px;
				font-size: 28px;
				display: flex;
				line-height: 44.8px;

				.color {
					color: #21F5EA;
				}
			}

			.getBottom {
				margin-top: 20px;
				display: flex;
				justify-content: space-between;
				font-size: 24px;
				line-height: 56px;

				// 渐变按钮
				.sbGet {
					width: 128px;
					height: 56px;
					font-size: 24px;
					line-height: 50px;
					margin: 0;
					background-color: #181818;
					color: #000;
					border-radius: 8px;
					border: 2px solid transparent;
					background-clip: padding-box, border-box;
					background-origin: padding-box, border-box;
					background-image: linear-gradient(-45deg, #4E47FF, #06FFDD);
					box-shadow: inset 0 0 16px -10px #fff;
				}
			}
		}

		// 会员样式
		.getVip {
			background: url(../../static/images/Home/Home_bg_gold.png) no-repeat;
			background-size: 100%;
			height: 216px;
			margin-top: 16px;
			padding: 116px 43px 0;

			.blackDate {
				font-size: 24px;
				margin-top: 12px;
				display: flex;
				color: #947A52;

				.deadline {
					border: 1px solid #CDC0B0;
					padding: 2px 14px;
					margin-right: 10px;
					color: #CDC0B0;
				}
			}

			.jackpot {
				color: #BBB0A1;
				font-size: 24px;
				display: flex;
				justify-content: space-between;
				margin-top: 20px;
				padding: 20px 0 10px;
			}

			.jackpotT {
				color: #947A52;
				font-size: 24px;
				display: flex;
				justify-content: space-between;
			}

			.progress {
				margin-top: 12px;
				width: 320px;
				height: 8px;
				border-radius: 10px;
				background-color: #74636E;
				overflow: hidden;
				color: #947A52;

				.progressChlid {
					background-color: #E2DBC9;
					height: 100%;
					border-radius: 10px;
					width: 80%;
				}
			}
		}

		// 帮助功能样式
		.guide {
			display: flex;
			justify-content: space-between;
			margin-top: 32px;

			.play {
				width: 322px;
				background-color: #2A2B2E;
				border-radius: 30px;
				font-size: 28px;
				color: #fff;
				text-align: center;
				line-height: 40px;
				padding-bottom: 61px;
				background: url(../../static/images/Home/state_bg.png) no-repeat;
				background-size: 100%;

				image {
					width: 100px;
					display: block;
					margin: 72px auto 36px;
				}
			}

			.right {
				width: 322px;

				.new {
					display: flex;
					font-size: 28px;
					background-color: #2A2B2E;
					border-radius: 30px;
					color: #fff;
					line-height: 150px;
					background: url(../../static/images/Home/novice_bg.png) no-repeat;
					background-size: 100%;

					image {
						margin: 25px;
						margin-right: 19px;
						width: 100px;
					}
				}

				.feed {
					margin-top: 24px;
					display: flex;
					font-size: 28px;
					background-color: #2A2B2E;
					border-radius: 30px;
					color: #fff;
					line-height: 150px;
					background: linear-gradient(to right, #0A155B, #4661A5);

					image {
						margin: 25px;
						margin-right: 19px;
						width: 100px;
					}
				}
			}
		}
	}
</style>